<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-04-11 21:55:14
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-06-10 17:05:22
 -->
<template>
  <div class="upload">
    <!-- <input type="file" name="file" id="fileId" />
    <button @click='handleUpload'>上传</button>
    <el-upload class="upload-demo" :headers='obj' :auto-upload='true' :before-upload='beforeAvatarUpload'
      :on-change="beforeAvatarChange" drag action="https://httpbin.org/post" multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload> -->
    <Plupload :file-list="fileList" :limit="1" biz-type="trainModule" :draggable="true"
      accept-files=".docx,.doc,.xlsx,.xls,.ppt,.pptx" @onChange="handleFileChange" />

    <!-- <el-upload class="upload-demo" :before-upload='beforeAvatarUpload' ref="upload" action="/"
      :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload> -->


    <!-- <el-form :model="currentCheckedData" ref="ruleForm" label-width="120px"
                                class="demo-ruleForm">
                                <el-form-item label="任务名称：" prop="taskName" class="test">
                                    <el-input v-model="currentCheckedData.taskName" size='mini'></el-input>
                                </el-form-item>
                                <el-form-item label="报表类型：" prop="reportTypeName">
                                    <el-select v-model="currentCheckedData.reportTypeName" size='mini'
                                        placeholder="请选择活动区域">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label='报告年份：' prop='endYearValue'>
                                    <el-date-picker class="end-date" size='mini' :clearable=false
                                        v-model="currentCheckedData.endYearValue" type="year" value-format='yyyy'
                                        @change='handleChangeYear'>
                                </el-form-item>
                                <el-form-item label='报告日期：' prop='endYearValue'>
                                    <el-input size='mini' v-model="currentCheckedData.endYearValue" size='mini'>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label='报告版次：' prop='versionName'>
                                    <el-select class="due-days" size='mini' placeholder=''
                                        v-model="currentCheckedData.versionName">
                                        <el-option label="预测数" value="00"></el-option>
                                        <el-option label="实际数" value="01"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label='年报模板：' prop="version">
                                    <el-select v-model="currentCheckedData.version" size='mini' placeholder="年报模版">
                                        <el-option :label="item.showName" :value="item.id + ''"
                                            v-for='item in taskReportOptions'></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="下发状态：" prop="publishFlagName">
                                    <el-input v-model="currentCheckedData.endDays" size='mini'></el-input>
                                </el-form-item>
                                <el-form-item label="任务截止天数：" prop="endDays">
                                    <el-input v-model="currentCheckedData.endDays" size='mini'></el-input>
                                </el-form-item>
                                <el-form-item label="任务截止日期：" prop="endDateValue">
                                    <el-date-picker class="end-date" :clearable=false size='mini'
                                        v-model="currentCheckedData.endDateValue" type="date" value-format='yyyy-MM-dd'
                                        @change='handleChangeTime'>
                                </el-form-item>
                            </el-form> -->

  </div>
</template>
<script>
  import Plupload from '@/components/Plupload2'
  import querystring from 'querystring'
  import axios from 'axios'
  export default {
    components: {
      Plupload
    },
    data() {
      return {
        fileList: [],
        obj: {
          'auth': 'test1111'
        }
      };
    },
    methods: {
      // axiosPostRequest(url, data, val) {
      //   let data1 = val ? data : qs.stringify(data)
      //   let headers = val ? {
      //     'content-type': 'application/json;charset=utf-8'
      //   } : {}
      //   let result = axios({
      //     method: 'post',
      //     url: apiUrl + url,
      //     data: data1,
      //     headers: headers
      //   }, {
      //     responseType: 'json',
      //     withCredentials: true,
      //   }).then(res => {
      //     return res.data
      //   }).catch(err => {
      //     return err
      //   });
      //   return result
      // },
      // 获取上传文件流
      handleUpload() {
        var file = document.getElementById('fileId').files[0]
        // console.log(document.getElementById('fileId').value, '0000')
        var url = document.getElementById('fileId').value
        let data = {
          showName: file.name,
          fileName: file.name,
          filePath: url,
          showType: 0,
          creator: '张三',
          createTime: '2020-10-18',
          isEnable: 0
        }
        // console.log(file, '文件流')
        // let formdata = new FormData()
        // formdata.append('file', file)
        // // console.log(formdata)

        // this.$api.uploadImage(JSON.stringify(data)).then(res => {
        //   console.log(res)
        // })
        axios({
          methods: 'post',
          url: 'https://192.168.8.132:80/annals/pab/annex/insert',
          data: JSON.stringify([data]),
          headers: { 'content-type': 'application/json;charset=utf-8' }
        }, { responseType: 'json', withCredentials: true }).then(res => {
          console.log(res, '结果')
        })
      },

      // 手动上传
      submitUpload() {
        this.$refs.upload.submit();
      },

      // 修改后上传
      handleChange() {
        console.log('修改后上传')
      },
      // 上传成功调用的方法
      handleFileChange() {
        console.log('123123')
      },
      // 文件选取改变
      beforeAvatarChange() {
        console.log('文件选取改变')
      },
      // 文件上传
      beforeAvatarUpload(file) {
        console.log(file, '文件上传前')
        let start = 0
        let end
        let index = 0
        let fileSize = file.size
        let fileName = file.name
        let bytesPerPiece = 1024 * 1024 // 文件切片大小
        // 计算文件切片总数
        let totalPieces = Math.ceil(fileSize / bytesPerPiece);
        while (start < fileSize) {
          end = start + bytesPerPiece
          if (end > fileSize) {
            end = fileSize
          }
          let chunk = file.slice(start, end) // 切割文件
          let sliceIndex = file.name + index
          let formdata = new FormData()
          formdata.append('file', fileName)
          start = end;
          index++;
          // this.$api.uploadImage(formdata).then(res => {
          //   console.log(res)
          // })
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    }
  }
</script>

<style scoped>
  .upload {
    margin-left: 50px;
  }

  .upload-demo {
    margin-top: 50px;
  }
</style>